<script setup lang="ts">
import Content from '@/components/Content/index.vue'
import UploadVideoProgress from '@/components/UploadVideoProgress/index.vue'
import TranscodingVideo from '@/components/TranscodingVideo/index.vue'
import PushItem from './components/PushItem/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import APIUploadMaterial from '@/api/upload-material'
import { useAuth } from '@/stores/index'
import type { Emits } from './utils/types'

const $emit = defineEmits<Emits>()

const $router = useRouter()

const { info } = storeToRefs(useAuth())

const objectFile = ref<any>([])

const fileRef = shallowRef<HTMLInputElement>()
const isPushVideo = ref<any[]>([])

function onChangeFile(e: Event) {
    const dom = e.target as HTMLInputElement
    const files = dom.files
    if (!files) return
    for (let file of files) {
        if (!file.type.includes('video')) {
            dom.value = ''
            ElMessage.error('只能上传视频文件类型')
        } else {
            objectFile.value.push(file)
        }
    }
    dom.value = ''
}


function onRemove(index: number) {
    objectFile.value.splice(index, 1)
}

function handleUpload() {
    if ((isPushVideo.value.length + objectFile.value.length >= 10) && !info.value.shop_id) {
        ElMessageBox.confirm(
            '未中请店铺权限，限制上传10个产品数量，是否去申请开通店铺？',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            $emit('close')
            $router.push({
                name: 'Store'
            })
        }).catch(() => { })
        return
    }
    fileRef.value?.click()
}

const disabledUploadFiles = shallowRef<boolean>(false)

const progressFileRefs = ref<InstanceType<typeof UploadVideoProgress>[]>([])

const transcodingVideo = ref<any[]>([])
function onSuccess(code: string, index: number) {
    const nextIndex = index + 1
    transcodingVideo.value.push(code)
    if (nextIndex < progressFileRefs.value.length) {
        const nextElement = progressFileRefs.value[nextIndex]
        nextElement.handleUpload()
    } else {
        ElMessage.success('已全部上传完毕')
        objectFile.value = []
        disabledUploadFiles.value = false
    }
}

const loading = shallowRef<boolean>(false)

function getIsPushVideo() {
    loading.value = true
    APIUploadMaterial.getIsPushVideo().then(({ data }) => {
        isPushVideo.value = data
    }).finally(() => {
        loading.value = false
    })
} getIsPushVideo()

function onTranscodingSuccess(index: number) {
    transcodingVideo.value.splice(index, 1)
    getIsPushVideo()
}

function handleUploadFiles() {
    disabledUploadFiles.value = true
    progressFileRefs.value[0].handleUpload()
}

defineExpose({
    disabledUploadFiles
})

</script>

<template>
    <div class="template">
        <div class="btns">
            <div class="btns-left">
                <button class="btns-left-btn" type="button" @click="handleUpload">
                    <p>+</p>
                    <p>视频文件</p>
                </button>
                <input type="file" @change="onChangeFile" style="display: none;" ref="fileRef" accept="video/*"
                    multiple />
            </div>
            <el-button type="danger" class="btns-right" v-if="progressFileRefs?.length != 0" @click="handleUploadFiles"
                :disabled="disabledUploadFiles">上传</el-button>
        </div>
        <Content class="center">
            <div class="empty" v-if="objectFile.length == 0">在“视频文件”处添加上传文件</div>
            <TransitionGroup name="list">
                <UploadVideoProgress ref="progressFileRefs" v-for="(file, index) in objectFile" :key="index"
                    :file="file" @on-remove="onRemove(index)" @on-success="onSuccess($event, index)" />
            </TransitionGroup>
        </Content>
        <div class="push-list" v-loading="loading">
            <TranscodingVideo v-for="(item, index) in transcodingVideo" :key="index" :code="item"
                @on-success="onTranscodingSuccess(index)" />
            <PushItem v-for="item in isPushVideo" :key="item.goods_id" :item="item" @get-is-pus="getIsPushVideo"
                @close="$emit('close')" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.template {
    .quxiao {
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    .push-list {
        width: 900px;
        display: grid;
        grid-template-columns: repeat(4, 200px);
        margin-top: 54px;
        justify-content: space-between;
        gap: 30px 0;

        >div {
            box-sizing: border-box;
            height: 112px;
            border-radius: 5px;
            overflow: hidden;
        }
    }

    .center {
        margin-top: 20px;
        min-height: 172px;
        position: relative;
        padding: 8px 12px;
        box-sizing: border-box;

        .empty {
            font-size: 13px;
            color: #9A9A9A;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }
    }

    .btns {
        display: flex;
        justify-content: space-between;

        .btns-right {
            width: 170px;
            height: 38px;
            line-height: 20px;
            border-radius: 5px;
            font-size: 14px;
            letter-spacing: 5px;
            background-color: #F91B1B;
        }

        .btns-left {
            display: flex;
            align-items: center;
            gap: 0 34px;

            .ative {
                position: relative;
                left: -15px;

                .delete {
                    position: absolute;
                    right: -10px;
                    top: -10px;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: #F91B1B;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                }
            }

            .btns-left-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 170px;
                height: 38px;
                border: none;
                border-radius: 5px;
                font-size: 14px;
                cursor: pointer;
                background-color: rgba(55, 133, 242, 1);
                color: rgba(255, 255, 255, 1);
                gap: 0 10px;
            }


            .btns-left-btn-music {
                background-color: #ffffff;
                color: #ff0000;
                border: 1px dashed rgba(206, 206, 206, 1);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0 10px;
            }
        }
    }
}

.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>
